<template>
    <div class="self-address">
        <div class="self-address-header">
            <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="$router.back()" flxed />
        </div>
        <div class="self-address-content">
            <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @select="updateIsdefault"
                @add="$router.push({ name: 'addaddress', query: { name: '新增' } })" @edit="updateAddress">
            </van-address-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getAddressApi, updateAddresscheckApi } from '@/api/self'
import { onMounted } from 'vue';
import type { AddressListProps, AddressListAddress } from 'vant';
import { useRouter } from 'vue-router';
import { LS_Pro } from '@/util/storage';
const chosenAddressId = ref<string>('')
const router = useRouter()
interface IlistData {
    id: number,
    name: string
    tel: string
    address: string
    isDefault: boolean
}
const list = ref<IlistData[]>([])
const baselist = ref<SelfNs.IaddressData[]>([])
const someoneInfoParams = ref<SelfNs.IaddressParams>({
    address: '',
    addressId: '',
    checked: false,
    detailadress: '',
    openId: '',
    telNumber: '',
    userName: ''
})
const someoneInfo = ref<SelfNs.IaddressData>({
    address: '',
    address_detail: '',
    id: 0,
    is_default: 0,
    mobile: '',
    name: '',
})

// 这里是获取地址信息的方法
const getAddressHandler = async () => {
    let res = await getAddressApi()
    baselist.value = res.data
    LS_Pro.set('address', baselist.value)
    LS_Pro.set('addressdefalt',baselist.value[0])
    list.value = res.data.map(item => {
        return {
            id: item.id,
            name: item.name,
            tel: item.mobile,
            address: item.address + ' ' + item.address_detail,
            isDefault: Boolean(item.is_default),
        }
    })
}
const updateIsdefault = async (a: AddressListAddress) => {
    (someoneInfo.value as unknown) = baselist.value.find(item => a.id == item.id)
    someoneInfoParams.value = {
        address: someoneInfo.value.address,
        addressId: someoneInfo.value.id.toString(),
        checked: true,
        detailadress: someoneInfo.value.address_detail,
        openId: '66',
        telNumber: someoneInfo.value.mobile,
        userName: someoneInfo.value.name
    }
    let res = await updateAddresscheckApi(someoneInfoParams.value)
    getAddressHandler()
    router.back()

}
const updateAddress = (a: AddressListAddress) => {
    router.push({ name: 'addaddress', query: { name: '编辑', id: a.id } })
}
onMounted(() => {
    getAddressHandler()
})

</script>

<style scoped lang="scss">
.self-address {
    .self-address-header {
        height: 45px;
    }

    .self-address-content {
        display: flex;
        margin-top: 20px;
        flex-direction: column;

        .self-address-item {
            width: 3.12rem;
            height: 0.9rem;
            padding: 26px 25px 18px 17px;
            // background: red;
            margin: 0 auto;
            border-bottom: 1px solid rgb(223, 223, 223);
        }
    }

    .van-button--round {
        margin: 30;
        position: absolute;
        left: 245px;
        top: 10px;
    }
}
</style>